<template>
  <el-tabs v-model="activeName">

    <el-tab-pane label="个人资料" name="first">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><i class="el-icon-s-order"/> 基本信息</span>
        </div>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="form.nickName" style="width: 198px"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-radio-group v-model="form.programmerStatus">
              <el-radio :label="1">求职</el-radio>
              <el-radio :label="2">自由</el-radio>
              <el-radio :label="3">正在工作</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="职业">
            <el-select v-model="form.programmerCareer">
              <el-option label="后端" value="后端"></el-option>
              <el-option label="移动端" value="移动端"></el-option>
              <el-option label="前端" value="前端"></el-option>
              <el-option label="DBA" value="DBA"></el-option>
              <el-option label="设计师" value="设计师"></el-option>
              <el-option label="产品经理" value="产品经理"></el-option>
              <el-option label="其他" value="其他"></el-option>
              <el-option label="测试" value="测试"></el-option>
              <el-option label="运维" value="运维"></el-option>
              <el-option label="游戏" value="游戏"></el-option>
              <el-option label="小程序" value="小程序"></el-option>
            </el-select>
            <el-select v-model="form.programmerCareerDirect">
              <el-option label="Java" value="Java"></el-option>
              <el-option label="C++" value="C++"></el-option>
              <el-option label="PHP" value="PHP"></el-option>
              <el-option label="C" value="C"></el-option>
              <el-option label="C#" value="C#"></el-option>
              <el-option label="Python" value="Python"></el-option>
              <el-option label="Ruby" value="Ruby"></el-option>
              <el-option label="Node.js" value="Node.js"></el-option>
              <el-option label="Android" value="Android"></el-option>
              <el-option label="IOS" value="IOS"></el-option>
              <el-option label="UI" value="UI"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="公司">
            <el-select v-model="form.programmerCompany" placeholder="请选择">
              <el-option label="智联招聘" value="智联招聘"></el-option>
              <el-option label="途牛" value="途牛"></el-option>
              <el-option label="迅雷" value="迅雷"></el-option>
              <el-option label="七牛云" value="七牛云"></el-option>
              <el-option label="途家网" value="途家网"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="职位">
            <el-select v-model="form.programmerPosition" placeholder="请选择">
              <el-option label="高级后端工程师" value="高级后端工程师"></el-option>
              <el-option label="高级移动端工程师" value="高级移动端工程师"></el-option>
              <el-option label="高级架构师" value="高级架构师"></el-option>
              <el-option label="创始人&CEO" value="创始人&CEO"></el-option>
              <el-option label="高级数据库工程师" value="高级数据库工程师"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <i class="el-icon-setting"> 个人设置</i>
        <el-divider></el-divider>
        <el-input placeholder="请输入内容" v-model="form.programmerEmail">
          <template slot="prepend">邮箱</template>
          <template slot="append">
            <el-switch
                style="display: block"
                v-model="switchStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="接收订阅邮件">
            </el-switch>
          </template>
        </el-input>
        <el-button type="primary" style="margin-top: 10px" @click="pushFrom()"><i class="el-icon-user"> 保存</i>
        </el-button>
      </el-card>
    </el-tab-pane>

    <el-tab-pane label="工作设置" name="second">
      <p>可工作时间</p>
      <el-time-select :clearable=false placeholder="工作日起始时间" v-model="workTimeForm.WDBT"
                      :picker-options="{start: '08:30',step: '00:15',end: '18:30'}">
      </el-time-select>
      <el-time-select :clearable=false placeholder="工作日结束时间" v-model="workTimeForm.WDET"
                      :picker-options="{ start: '08:30',step: '00:15', end: '18:30', minTime:workTimeForm.WDBT}">
      </el-time-select>
      <br>
      <el-time-select :clearable=false placeholder="周末起始时间" v-model="workTimeForm.WWBT"
                      :picker-options="{start: '08:30',step: '00:15',end: '18:30'}">
      </el-time-select>
      <el-time-select :clearable=false placeholder="周末结束时间" v-model="workTimeForm.WWET"
                      :picker-options="{ start: '08:30',step: '00:15', end: '18:30', minTime:workTimeForm.WWBT}">
      </el-time-select>

      <p style="margin-top: 10px">所在地区</p>
      <el-select v-model="workTimeForm.regionProvince" placeholder="请选择省份">
        <el-option
            v-for="item in provinceOptions"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>

      <el-select v-model="workTimeForm.regionCity" placeholder="请选择城市">
        <el-option
            v-for="item in cityOptions"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>

      <p style="padding-top: 20px">每周工作时长 </p>
      <el-radio-group v-model="workTimeForm.weeklyTime" style="padding-bottom: 20px">
        <el-radio :label="1">15小时以下</el-radio>
        <el-radio :label="2">15-25小时</el-radio>
        <el-radio :label="3">25-40小时</el-radio>
        <el-radio :label="4">40小时以上</el-radio>
      </el-radio-group>

      <p>可工作方式</p>
      <el-radio-group v-model="workTimeForm.workWay">
        <el-radio :label="1">远程工作</el-radio>
        <el-radio :label="2">驻场工作</el-radio>
        <el-radio :label="3">远程+驻场</el-radio>
      </el-radio-group>

      <p style="padding-top: 20px">日薪</p>
      <el-input-number v-model="workTimeForm.salary" controls-position="right" :min="1"></el-input-number>

      <p style="padding-top: 20px">接单状态 </p>
      <el-radio-group v-model="workTimeForm.workStatus">
        <el-radio :label="1">接受订单</el-radio>
        <el-radio :label="2">忙碌中</el-radio>
        <el-radio :label="3">不接单</el-radio>
      </el-radio-group>
      <br>
      <el-button type="primary" style="margin-top: 10px" @click="pushWorkFrom()"><i class="el-icon-user"> 保存</i>
      </el-button>
    </el-tab-pane>

    <el-tab-pane label="实名认证" name="third">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><i class="el-icon-user-solid"></i> 实名认证</span>
        </div>

        <el-form ref="form" :model="certificationForm" label-width="80px">
          <el-form-item label="实名认证">
            <el-button type="info" @click="dialogVisible = true">去认证</el-button>
          </el-form-item>
          <el-form-item label="支付宝">
            <el-input v-model="certificationForm.alipayAccount" style="width: 200px"></el-input>
            <el-button type="primary" style="margin-left: 20px" @click="pushAli()">去绑定</el-button>
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="certificationForm.wechatAccount" style="width: 200px"></el-input>
            <el-button type="primary" style="margin-left: 20px" @click="pushWeChat()">去绑定</el-button>
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="certificationForm.qqAccount" style="width: 200px"></el-input>
            <el-button type="primary" style="margin-left: 20px" @click="pushQq()">去绑定</el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </el-tab-pane>

    <el-tab-pane label="修改密码" name="fourth">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><i class="el-icon-lock"></i> 修改密码</span>
        </div>

        <el-form ref="form" :model="upDatePassForm" label-width="80px">
          <el-form-item label="原密码">
            <el-input placeholder="请输入原密码" v-model="upDatePassForm.originalPassword" show-password
                      style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input placeholder="请输入新密码" v-model="upDatePassForm.newPassword" show-password
                      style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="重复输入">
            <el-input placeholder="重复输入" v-model="repeat" show-password style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-top: 10px" @click="pushPass()"><i class="el-icon-user"> 保存</i>
            </el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </el-tab-pane>

    <el-tab-pane label="修改头像" name="fifth">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><i class="el-icon-camera-solid"></i> 修改头像</span>
        </div>

        <div class="clearfix">
          <span><i class="el-icon-camera-solid"></i> 当前头像</span>
        </div>

        <img style="width: 178px;height: 178px" :src=this.$store.state.userImg alt="图片加载失败">

        <div class="clearfix">
          <span><i class="el-icon-camera-solid"></i> 上传新头像</span>
        </div>

        <el-upload
            class="avatar-uploader"
            action="http://101.200.150.138:8088/image/uploadUser"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="图片未加载">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </el-card>
    </el-tab-pane>

    <el-tab-pane label="绑定账号" name="sixth">绑定账号</el-tab-pane>

    <el-dialog title="认证" :visible.sync="dialogVisible" width="30%">
      <span>实名认证</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = true">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </el-tabs>
</template>

<script>
import Vue from 'vue'

export default {
  name: "pC_Info",
  data() {
    return {
      //个人资料
      activeName: 'first',
      switchStatus: true,
      form: {},

      //工作设置
      workTimeForm: {},
      provinceOptions: ['黑龙江', '河北', '江苏', '内蒙古', '上海'],
      cityOptions: ['齐齐哈尔', '哈尔滨', '大庆', '苏州', '信阳'],

      //实名认证
      certificationForm: {},
      dialogVisible: false,

      //修改密码we
      repeat: '',
      upDatePassForm: {
        programmerId: this.$store.state.userId,
        originalPassword: '',
        newPassword: '',
      },

      //上传头像
      myHeaders: {Authorization: window.sessionStorage.getItem('token')},
      imageUrl: ''
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.$store.state.userImg = res.content.imageUrl
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        Vue.prototype.$notify.error({
          title: '失败',
          message: '上传头像图片大小不能超过 2MB'
        });
      }
      return isLt2M;
    },

    async pullFrom() {
      const {data: res} = await this.$http.get('/programmer/programmerInfo/' + this.$store.state.userId)
      this.form = res.content
    },
    async pullWorkFrom() {
      const {data: res} = await this.$http.get('/work/work/' + this.$store.state.userId)
      this.workTimeForm = res.content
    },
    async pullCertificationForm() {
      const {data: res} = await this.$http.get('/programmer/programmerAccount/' + this.$store.state.userId)
      this.certificationForm = res.content
    },

    async pushFrom() {
      const {data: res} = await this.$http.put('/programmer/personalInfo', this.form)
      if (res.code == "201") {
        Vue.prototype.$notify.success({
          title: '成功',
          message: '更新成功'
        })
        this.$store.state.userName = this.form.nickName
      }
    },
    async pushWorkFrom() {
      const {data: res} = await this.$http.put('/work/work', this.workTimeForm)
      if (res.code == "201") {
        Vue.prototype.$notify.success({
          title: '成功',
          message: '更新成功'
        })
      }
    },

    async pushAli() {
      if (this.certificationForm.alipayAccount !== "") {
        const {data: res} = await this.$http.put('/programmer/accountInfo', this.certificationForm)
        if (res.code == "201") {
          Vue.prototype.$notify.success({
            title: '成功',
            message: '更新成功'
          })
        }
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: '输入不能为空'
        })
      }
    },
    async pushWeChat() {
      if (this.certificationForm.wechatAccount !== "") {
        const {data: res} = await this.$http.put('/programmer/accountInfo', this.certificationForm)
        if (res.code == "201") {
          Vue.prototype.$notify.success({
            title: '成功',
            message: '更新成功'
          })
        }
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: '输入不能为空'
        })
      }
    },
    async pushQq() {
      if (this.certificationForm.qqAccount !== "") {
        const {data: res} = await this.$http.put('/programmer/accountInfo', this.certificationForm)
        if (res.code == "201") {
          Vue.prototype.$notify.success({
            title: '成功',
            message: '更新成功'
          })
        }
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: '输入不能为空'
        })
      }
    },

    async pushPass() {
      if (this.upDatePassForm.newPassword === this.repeat) {
        const {data: res} = await this.$http.put('/programmer/passwordInfo', this.upDatePassForm)
        if (res.code == "201") {
          Vue.prototype.$notify.success({
            title: '成功',
            message: '修改成功'
          })
        } else {
          Vue.prototype.$notify.error({
            title: "失败",
            message: "修改失败，可能是原密码不正确"
          })
        }
      } else {
        Vue.prototype.$notify.error({
          title: "错误",
          message: "两次输入不一致"
        })
      }
    }
  }
  ,
  mounted() {
    this.pullFrom()
    this.pullWorkFrom()
    this.pullCertificationForm()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>